<template>
    <div>
        <myHeaderVue>
            <template #right>
                <img src="../../../public/img/搜索_填充.svg" style="width: 20%;height: 100%;" alt=""
                    @click="$router.push('/search')">
            </template>
            <template #center>特色课</template>
        </myHeaderVue>
        <van-dropdown-menu class="nav">
            <van-dropdown-item title="分类" ref="item">
                <van-button type="danger" @click="$refs.item.toggle()"
                    style="margin: .4rem;width: 30%;padding: 0.2rem;margin-left: 10%;">重置</van-button>
                <van-button type="danger" plain @click="$refs.item.toggle()"
                    style="margin: .4rem;width: 30%;padding: 0.2rem;margin-left: 10%;">确定</van-button>
            </van-dropdown-item>
            <van-dropdown-item title="排序" @change="changes" v-model="obj.order_by" :options="option">
            </van-dropdown-item>
            <van-dropdown-item title="筛选" ref="div">
                <div v-for="(item,index) in type" :key="index" class="button" @click="sai(item.val)"
                    :class="{activ:obj.course_type==item.val}">
                    {{item.name}}
                </div>
            </van-dropdown-item>
        </van-dropdown-menu>
        <!-- 商品列表 -->
        <cartList v-for="(item,index) in list" :key="index" :item="item"></cartList>
        <h5 style="color:#ccc;text-align: center; margin-top: .6rem;font-size: .4rem;" v-show="list.length>=total">没有更多了
        </h5>
    </div>
</template>

<script>
import myHeaderVue from '@/components/myHeader.vue';
import cartList from '@/components/cartList.vue'
import { course } from '@/http/api'
export default {
    components: {
        myHeaderVue, cartList
    },
    data() {
        return {
            //请求参数
            obj: {
                course_type: 0,
                limit: 5,
                page: 1,
                order_by: 0
            },
            list: [],
            option: [{ text: '综合排序', value: 0 },
            { text: '最新', value: 1 },
            { text: '最热', value: 2 },
            { text: '价格升序', value: 3 },
            { text: '价格降序', value: 4 },
            ],
            type: [
                { name: '全部', val: 0 },
                { name: '图文', val: 10 },
                { name: '大班课', val: 2 },
                { name: '小班课', val: 3 },
                { name: '视频课', val: 5 },
                { name: '音频课', val: 8 },
                { name: '系统课', val: 9 },
            ],
            total: 0
        }
    },
    methods: {
        //请求数据
        async fn(val) {
            let res = await course(val)
            let arr = [].concat(this.list)
            arr.push(...res.data.data.list)
            this.total = res.data.data.total
            console.log(res.data);
            this.list = arr
        },
        //排序
        changes() {
            console.log(this.obj.order_by);
            this.list = []
            this.fn(this.obj)

        },
        sai(val) {
            this.$refs.div.toggle()
            this.obj.course_type = val
            this.list = []
            this.fn(this.obj)

        }
    },
    created() {
        this.fn(this.obj)

    },
    mounted() {
        window.onscroll = () => {
            //变量scrollTop是滚动条滚动时，距离顶部的距离
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            //变量windowHeight是可视区的高度
            let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
            //变量scrollHeight是滚动条的总高度
            let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            //滚动条到底部的条件
            //scrollTop!=0是由于其他功能在body上设置了最小高度100vh，切换tab的时候body高度位100vh。
            if ((Math.ceil(scrollTop + windowHeight) == parseInt(scrollHeight)) && scrollTop != 0) {
                this.obj.page++
                if (this.list.length < this.total) {
                    this.fn(this.obj)
                }

            }
        }
    }
}
</script>

<style lang="scss" scoped>
:deep(.van-dropdown-menu__bar) {
    height: 1rem !important;

}

:deep(.van-cell) {
    height: .6rem;
}

.button {
    display: inline-block;
    width: 20%;
    text-align: center;
    line-height: 1rem;
    background-color: #f5f5f5;
    margin: .2rem 2.5%;
    border-radius: .1rem
}

.activ {
    background-color: #ebeefe;
    color: #eb6100;
}
</style>